<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tfw</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
	.table_id_1_td{margin: 0px!important;padding: 5px!important;pacolor: black!important;}
	.table_id_1_th {margin: 0px!important;padding: 5px!important;background-color:#0d02bd!important;color: #FFF!important;}
    .layui-table-cell{border-color: #FFF!important;}
    .tfw_info{cursor: pointer;}
    #info_window_table{margin: 10px;}
    #info_window_table td{margin: 10px;padding: 8px;width: 150px;}
</style>
<link rel="stylesheet" href="/layui-v2.4.5/layui/css/layui.css" />
<script type="text/javascript" src="/jquery-easyui-1.4.5/jquery.min.js"></script>

<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]--> 
</head>
<body>
<div class="layui-col-sm12">
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
		<legend>熟练度/分类统计</legend>
	</fieldset>
	
	<table class="layui-table" id="table_id_1">
		<thead>
		    <tr>
		      <th class="table_id_1_th">分类</th>
		      <th class="table_id_1_th" colspan="10" style="text-align: center;">明细</th>
		    </tr> 
		</thead>
		<tr th:each="typeData:${allTfw2}" >
			<th th:text="${typeData.type.name}" class="layui-table-cell table_id_1_th" style="width: 8%;"></th>
			<td 
				th:each="type:${typeData?.tfws}" 
				th:text="${type.nameAcronym}" 
				th:style="'background-color: ' + ${type.skilledBackgroundColor} + ';'"
				th:title="'英文名称:' + ${type.nameEn} + ', 中文名称:' + ${type.nameZh} +''"
				th:onclick="'showInfo('+${type.id}+')'"
				class="layui-table-cell tfw_info table_id_1_td"
			>
			</td>
		</tr>
	</table>
</div>
<!-- 图例 -->
<table class="layui-table" style="width: 50%;">
	<tr >
		<td class="table_id_1_td">熟练度--图例</td>
		<td th:each="skill:${skilled}" th:style="'background-color: ' + ${skill.backgroundColor} + ';'" class="table_id_1_td" >
			<span th:text="${skill.name} + '__' + ${skill.code} + '级'"></span>
			&nbsp;&nbsp;
			<div th:id="'skill_tl_' + ${skill.code}"></div>
		</td>
	</tr>
</table>

<div class="layui-col-sm12">
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
		<legend>厂商/分类统计</legend>
	</fieldset>
	<div id="container2" style="height:400px"></div>		
</div>

<div class="layui-col-sm12" id="container">

</div>
		
<script type="text/javascript" src="/layui-v2.4.5/layui/layui.all.js"></script>
<script src="https://img.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://img.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.highcharts.com.cn/highcharts/modules/oldie.js"></script>
<script src="https://img.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
	autoRowSpan(table_id_1,0,0);// 合并单元格
	char2();
	
	pie(3);
	pie(4);
	pie(5);
	pie(6);
	pie(7);
});

// 合并单元格
function autoRowSpan(tb,row,col) { 
	var lastValue = "";
	var value = "";
	var pos = 1;
	for (var i = row; i < tb.rows.length; i++) {
		value = tb.rows[i].cells[col].innerText;
		if (lastValue == value) {
			tb.rows[i].deleteCell(col);
			tb.rows[i - pos].cells[col].rowSpan = tb.rows[i - pos].cells[col].rowSpan + 1;
			pos++;
		} else {
			lastValue = value;
			pos = 1;
		}
	}
}

function char2(){
	$.get('/tfw/classification', {type:2}, function(response){
		var x = [];
		var d = [];
		var data = response.data;
		for( var i = 0; i < data.length; i++ ){
			x[i] = data[i].key.mName;
			d[i] = data[i].data.length;
		}
		chart("container2", 'column', '各个厂商分布软件数量分布情况', x, '发布数量', { name: '软件数量',  data: d }, '')
	})
}

function pie(type){
	$.ajax({
		url : '/tfw/classification',
		type : 'GET',
		data :{type:type},
		async : false, 
		success:function(response){
			if(response.code != 200){
				return;
			}
			var id = 'container' + type;
			var title = response.msg;
			// 追加图形节点
			var html = '<div class="layui-col-sm6">'
			 + '<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">'
			 + '	<legend>' + title + '</legend>'
			 + '	</fieldset>'
			 + '	<div id="' + id + '"></div>'
			 + '</div>'
			$('#container').append(html);	
			// 生成图形数据
			var x = [];
			var d = [];
			var data = response.data;
			var sum = 0;
			for( var i = 0; i < data.length; i++ ){
				x[i] = data[i].key;
				sum += data[i].data.length;
			}
			
			for( var i = 0; i < data.length; i++ ){
				d[i] = { name: data[i].key,  y: data[i].data.length / sum * 100.0 };
			}
			chart(id, 'pie', title, x, '软件数量', { name: '软件数量', colorByPoint: true, data: d } , '%')
	   }
	})
}

function chart(id, type, title, x, yTitle, data, uint) {
	var chart = Highcharts.chart(id,{
	    chart: {
	        type: type
	    },
	    title: {
	        text: title
	    },
	    xAxis: {
	        categories: x,
	        crosshair: true
	    },
	    yAxis: {
	        min: 0,
	        title: {
	            text: yTitle
	        }
	    },
	    tooltip: {
	        // head + 每个 point + footer 拼接成完整的 table
	        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
	        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
	        '<td style="padding:0"><b>{point.y:.1f}'+uint+'</b></td></tr>',
	        footerFormat: '</table>',
	        shared: true,
	        useHTML: true
	    },
	    plotOptions: {
	        column: {
	            borderWidth: 0
	        }
	    },
	    series: [data]
	});
}
//跳转到修改页面
function goUpdate(){
	parent.goUpdate($('#update_tfw_id').val());
}

//跳转到新增页面
function goAdd(){
	parent.goAdd() 
}

var rate;
layui.use(['rate'], function(){
	rate = layui.rate;
});

// 显示五角星
function showStart(id, level){
	rate.render({
		elem: '#' + id,
	    value: level, //初始值
	    half: true //开启半星
	})
}
</script>
<!-- 详情页面 -->
<div style="display: none;" id="info_window">
	<input type="hidden" id="update_tfw_id" />
	<table id="info_window_table">
		<tr>
			<td>软件名称:</td><td><span id="nameAcronym"></span></td>
			<td>英文全称:</td><td><span id="nameEn"></span></td>
			<td>中文名称:</td><td><span id="nameZh"></span></td>
		</tr>
		<tr>
			<td>第一次发布时间:</td><td><span id="beginTimeStr"></span></td>
			<td>最近更新时间:</td><td><span id="lastUpdateTimeStr"></span></td>
		</tr>
		
		<tr>
			<td colspan="6">
				<img alt="" src="" id="licenseCodeStr">
				<img alt="" src="" id="languageCodeStr">
				<img alt="" src="" id="tagsCodeStr">
				<img alt="" src="" id="manufacturerCodeStr">
				<img alt="" src="" id="typeCodeStr">
				<img alt="" src="" id="countryCodeStr">
				<img alt="" src="" id="openSources">
				<img alt="" src="" id="osCodeStr">
			</td>
		</tr>
		
		<tr>
			<td>技术熟练度:</td><td><div id="skilledCodeStr"></span></td>
			<td>潮流度:</td><td><div id="popular"></div></td>
			<td>论坛活跃度:</td><td><div id="forum"></div></td>
		</tr>
		
		<tr>
			<td>源码:</td><td colspan="5"><div id="sourcesUrlArr"></div></td>
		</tr>
		
		<tr>
			<td>官网:</td><td colspan="5"><div id="uccnUrlArr"></div></td>
		</tr>
		
		<tr>
			<td>论坛:</td><td colspan="5"><div id="forumUrlArr"></div></td>
		</tr>
		
		<tr>
			<td>简单描述:</td><td colspan="5"><span id="desction"></span></td>
		</tr>
		<tr>
			<td colspan="6">备注:</td>
		</tr>
		<tr>
			<td colspan="6"><div id="remark"></div></td>
		</tr>
	</table>
	<div class="layui-form-item" align="center">
		<button class="layui-btn" onclick="goAdd()">新增</button>
		<button class="layui-btn" onclick="goUpdate()">修改</button>
	</div>
</div>
<script type="text/javascript">
//展示一个框架的详细
function showInfo(id){
	if(id == null || id == '' || id == false || id == "") {
		return;
	}
	$.ajax({
        type : "get",
        url : "/tfw/info/" + id,
        data :{},
        async : false,
        dataType : "json",
        success : function(response) {
        	if("success" == response.msg) {
	        	var data = response.data;
	        	for(key in data){
	        		var value = data[key];
	        		$('#' + key).text(value);
	        	}
	        	// 添加优美标签
	        	$('#licenseCodeStr').prop('src', 'https://img.shields.io/badge/license-' + data.licenseCodeStr + '-green.svg');
	        	$('#languageCodeStr').prop('src', 'https://img.shields.io/badge/language-' + data.languageCodeStr + '-yellowgreen.svg');
	        	$('#tagsCodeStr').prop('src', 'https://img.shields.io/badge/标签-' + data.tagsCodeStr + '-green.svg');
	        	$('#manufacturerCodeStr').prop('src', 'https://img.shields.io/badge/厂商-' + data.manufacturerCodeStr + '-blue.svg');
	        	$('#typeCodeStr').prop('src', 'https://img.shields.io/badge/技术分类-' + data.typeCodeStr + '-red.svg');
	        	$('#countryCodeStr').prop('src', 'https://img.shields.io/badge/国家-' + data.countryCodeStr + '-yellow.svg');
	        	$('#openSources').prop('src', 'https://img.shields.io/badge/开源-' + (data.openSources == 1 ? '开源' : '闭源')+ '-yellow.svg');
	        	$('#osCodeStr').prop('src', 'https://img.shields.io/badge/OS-' + data.osCodeStr + '-yellow.svg');
	        	// 五角星
	        	showStart('skilledCodeStr', data.skilledCode);
	        	showStart('popular', data.popular / 2);
	        	showStart('forum', data.forum / 2);
	        	// 初始化网址
	        	$("#sourcesUrlArr").empty();
	        	for(var i = 0; i < data.sourcesUrlArr.length; i++){
	        		$("#sourcesUrlArr").append("<a href='http://" + data.sourcesUrlArr[i] + "' target='_blank'>" + data.sourcesUrlArr[i] + "</a>&nbsp;&nbsp;&nbsp;");
	        	}
	        	$("#uccnUrlArr").empty();
	        	for(var i = 0; i < data.uccnUrlArr.length; i++){
	        		$("#uccnUrlArr").append("<a href='http://" + data.uccnUrlArr[i] + "' target='_blank'>" + data.uccnUrlArr[i] + "</a>&nbsp;&nbsp;&nbsp;");
	        	}
	        	$("#forumUrlArr").empty();
	        	for(var i = 0; i < data.forumUrlArr.length; i++){
	        		$("#forumUrlArr").append("<a href='http://" + data.forumUrlArr[i] + "' target='_blank'>" + data.forumUrlArr[i] + "</a>&nbsp;&nbsp;&nbsp;");
	        	}
				// 追加备注	        	
	        	$('#remark').html(data.remark);
	        	
	        	$('#update_tfw_id').val(data.id);
        		layer.open({
        			offset: '100px;',
        		  	type: 1,
        		  	skin: 'layui-layer-rim', //加上边框
        		  	area: ['1000x'], //宽高
        		  	content: $('#info_window').html()
        		});
        	} else {
        		layer.alert("查询出现异常", {title: '返回结果'});
        	}
        	
        }
    });
}
</script>
</body>
</html>